<template>
  <div class="updateModal">
    <a-modal
      :visible="addRoleModal"
      title="添加角色"
      @cancel="cancel"
      @ok="addRole"
      :destroyOnClose="destory"
    >
      <a-form-model
        id="components-form-demo-normal-login"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="ruleForm"
        :model="roleData"
        :rules="rules"
        class="login-form"
      >
        <a-form-model-item label="角色名称" prop="name">
          <a-input v-model="roleData.name" placeholder="请输入角色名称">
            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
          </a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { addRole } from '@/network/role.js'
export default {
  name: 'addNewRole',
  data () {
    return {
      addRoleModal: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 15
      },
      roleData: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称!', trigger: 'blur' },
        ]
      },
      destory: true
    };
  },
  computed: {

  },
  methods: {
    cancel () {
      this.addRoleModal = false
    },
    show () {
      this.roleData.name = ''
      this.addRoleModal = true
    },
    addRole () {
      console.log(this.roleData)
      addRole(this.roleData).then(res => {
        console.log(res)
        if (res.data.status === 200) {
          this.$message.success(res.data.msg)
          this.addRoleModal = false
          this.$emit("refreshTable")
        }
      })

    },
  },
  components: {

  },
};
</script>

<style scoped>
</style>
